/*
  表格数据-处理表格增、删、改、查处理
  共公类库
*/
import {createVNode,reactive} from "vue";
import router from "@/router.js";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';

export class Table{
   //公共public，私有private与受保护protected的修饰符
   public data=reactive({
    columns: [{
      title: 'Table表头',
      dataIndex: 'title',
      key: 'title',
    },{
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 200,
      slots: { customRender: 'action' },
    }],
    pageNum: 1,
    pageSize: 10,
    total: 500,
    loading:true,
    selectedRowKeys:[],//来控制选中项
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    isAdd: false,//是否显示添加
    isEdit:false,//是否显示编辑
    isDetali:false,//是否显示详情
    list:[],//列表数据
    info:{},//单条数据
    confirmLoading: false,
  })

  public onSelectChange(selectedRowKeys: Key[]){ //全选表格
     this.data.selectedRowKeys =selectedRowKeys;
  };

  public onSelectChangeAll(selectedRowKeys: Key[]){ //点击按钮全选表格
    let arr = this.data.list;
    if (this.data.selectedRowKeys.length <= 0) {
      for (let i = 0; i < arr.length; i++) {
        this.data.selectedRowKeys.push(arr[i].id)
      }
    } else {
        this.data.selectedRowKeys = []
    }
  };

  public onDeselect(){  //取消全选表格
    if (this.data.selectedRowKeys) {
        this.data.selectedRowKeys = [];
    }
  }

   public renderVNode(_, { attrs: { vnode } }){ //上一页、下一页显示
       return vnode;
    }

    //分页-page调转处理
    public onShowSizeChange(current, pageSize){
        console.log("pageSize", current, pageSize);
    };   
  
    public onPagination(pageNum){//点击页码数据处理---这两个方法需要重写获取数据
        this.data.pageNum = pageNum;
        this.data.loading = false;
        this.getList();
    }

    public onDeleTabl(key){//删除表格数据
        if (key) {//单条删除
          this.data.list = this.data.list.filter(item => item.id !== key);
          this.del([key]);
        } else {//多条删除
          let arr = this.data.selectedRowKeys;
          for (let i = 0; i < arr.length; i++) {
            this.data.list = this.data.list.filter(item => item.id !== arr[i]);
          }
          this.del(arr);
        }
      }
  
    public getList(){} //获取信息

    public del(key:[]){} //ajax删除数据处理 

    public onModal(title){ //删除显示
        Modal.confirm({
          title:title,
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, '删除将不显示此数据'),
          okText: '确认',
          cancelText: '取消',
          onOk() {
            console.log('OK');
            this.onDeleTabl();
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
    }  

    public onShowModel(index,record){ //显示0默认显示、1添加、2修改、3详情
      switch(index) {
        case 1:
          this.data.isAdd=true;
           break;
        case 2:
          this.data.isEdit=true;
           break;
        case 3:
          this.data.isDetails=true;
          break;   
        default:
          this.data.visible=true;
         }   
       if(record){
           this.data.info=record;
       }   
    }
    


   public onModelOk(index){ //弹框确定按钮 
      switch(index) {
        case 1:
          this.data.isAdd=false;
          break;
        case 2:
          this.data.isEdit=false;
          break;
        case 3:
          this.data.isDetails=false;
          break;   
        default:
          this.data.visible=false;
        }  
    };
   
    //弹框取消按钮
  public  onModelCancel(index){
      switch(index) {
        case 1:
          this.data.isAdd=false;
          break;
        case 2:
          this.data.isEdit=false;
          break;
        case 3:
          this.data.isDetails=false;
          break;   
        default:
          this.data.visible=false;
        }  
    };

}